<template>
    <div class="page-work-book-detail">
        <h4 class="page-work-title"><label>预约详情</label></h4>
        <div class="book-detail">
          <el-steps :space="200" :active="activeStep" :align-center="true" finish-status="success">
            <el-step title="等待确认" name="1"></el-step>
            <el-step title="等待沟通" name="3"></el-step>
            <el-step title="订单完成" name="4"></el-step>
            <!-- <el-step title="已评价" name="6" v-if="detail.orderState !== 2"></el-step> -->
             <!-- 1: '您已成功发起，请耐心等待', //待接单 button-取消预约
                2: '原因：最近比较忙', //未接单
                3: '', //已接单 button-拨打电话给TA
                4: '', //已沟通 button-评价TA
                5: '', //评价 button-评价TA
                6: '', //已完成
                7: '', //已过期
                8: '', //已取消 -->
          </el-steps>
          <div class="detail-handle">
            <div class="hd">
              订单编号：{{detail.orderId}}
              <span class="pull-right">{{detail.orderCreateTime}}</span>
            </div>
            <div class="bd">
              <div class="flex">
                <div class="img">
                  <img :src="detail.cusHead" alt="">
                </div>
                <div class="name">{{detail.cusName}}</div>
                <div class="status">
                  诚意金：<span class="num">￥{{detail.earnestMoney}} </span>
                  {{detail.orderState | filterOrderStatus}}
                </div>
                <div class="handles" v-if="detail.orderState == 1">
                  <el-button size="mini" @click="reject(detail.orderId)">拒绝接单</el-button>
                  <el-button size="mini" type="primary" @click="agree(detail.orderId)">同意接单</el-button>
                </div>
              </div>
              <div class="cont">
                <p>装修面积：{{detail.area}}m<sup>2</sup></p>
                <p>设计类别：{{detail.designerType}}</p>
                <p>所在城市：{{detail.city}}</p>
                <div class="adv-list" v-if="detail.adviserList && detail.adviserList.length > 0">
                  <img v-for="adv in detail.adviserList" :key="adv.id" :src="adv.headimg" alt="">
                </div>
              </div>
              <div class="ft">
                预算：<strong> {{detail.budget}}</strong>
              </div>
            </div>
          </div>
        </div>
    </div>
</template>

<script>
import {updateOrderStatue, cusOrderInfo} from '../../api/book'
export default {
    name: 'myBookDetail',
    props: {
      id: String
    },
    components: {

    },
    data(){
        return {
            detail: {
                area: '',
                budget: '',
                city: '',
                createTime: '',
                demandId: '',
                demandType: "1",
                designerId: '',
                earnestMoney: '',
                enable: '',
                headimgurl: '',
                nickName: '',
                orderId: '',
                orderMsg: '',
                orderState: '',
                payState: '',
                remark: null,
            },
        }
    },
    computed: {
      activeStep(){
        switch(this.detail.orderState){
          case 1:
            return 0
          case 2: 
            return 3
          case 3: 
            return 1
          case 4: 
            return 2
          case 6:
            return 3
          default: 
            return 3
        }
      }
    },
    methods: {
        reject(orderId){
          this.$prompt('请输入拒绝理由', '操作提示', {
            confirmButtonText: '提交',
            cancelButtonText: '取消',
            inputValidator: !/^[\u4E00-\u9FA5\uF900-\uFA2D\w]+$/,
            inputErrorMessage: '请输入'
          }).then(({ value }) => {
            if(!!value){
              updateOrderStatue({
                orderId,
                orderState: 2,
                orderMsg: value
              }).then(rsp => {
                if(rsp.code === 200){
                  this.$message.warning('拒单成功')
                  this.$router.push({name: 'myBook'})
                }
              })
            }else{
              this.$message.warning('拒绝理由不能为空')
            }
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消操作'
            });
          });
        },

        agree(orderId){
          updateOrderStatue({
            orderId,
            orderState: 3,
          }).then(rsp => {
            if(rsp.code === 200){
              this.$message.success('接单成功')
              this.$router.push({name: 'myBook'})
            }
          })
        },

        getOrderDetail(){
          cusOrderInfo(this.id).then(rsp => {
            if(rsp.code === 200){
               this.detail = rsp.data
            }
          })
        }
    },
    created(){
      // this.detail = JSON.parse(localStorage.myBookDetail)
      this.getOrderDetail()
    }
}
</script>


<style lang="less">
.page-work-book-detail{
    
    .book-detail{
      .el-steps{
        justify-content: center;
        padding: 80px 0 30px;
        .el-step__head.is-success{
          color: #fccf2f;
          border-color: #fccf2f;
        }
        .el-step__title.is-success{
          color: #fccf2f;
        }
      }
    }
    .detail-handle{
      padding: 40px 50px;
      .hd{
        padding: 15px 0;
        border-bottom: 1px solid #ddd;
        .pull-right{

        }
      }
      .bd{
        .flex{
          display: flex;
          align-items: center;
          padding: 15px 0;
          .img{
            img{
              width: 50px;
              height: 50px;
              border-radius: 50%;
              overflow: hidden;
            }
          }
          .name{
            flex: 1;
            margin: 0 10px;
          }
          .status{
            margin: 0 30px;
            font-size: 12px;
            color: #999;
            .num{
              font-size: 18px;
            }
          }
          .handles{

          }
        }
        .cont{
          padding: 30px 50px;
          line-height: 2;
          background-color: #eee;
          .adv-list{
            margin: 0 -10px;
            &>img{
              display: inline-block;
              margin: 10px;
              width: 40px;
              height: 40px;
              border-radius: 50%;
              box-shadow:  0 1px 5px rgba(0,0,0, .6);
            }
          }
        }
      }
      .ft{
        margin-top: 20px;
        text-align: right;
        strong{
          font-size: 20px;
          color: red;
        }
      }
    }
}
</style>

